<template>
  <h3>provide 与 inject</h3>
  <p>颜色:{{ color }}</p>
  <button @click="color='red'">红色</button>
  <button @click="color='yellow'">黄色</button>
  <button @click="color='blue'">蓝色</button>
  <hr>
  <Son/>
</template>

<script>
import { defineComponent, ref,provide } from "vue";
import Son from './components/Son'
export default defineComponent({
  name: "App",
  components:{
    Son
  },
  setup() {
    const color = ref("red");
    provide('color',color)
    return {
      color,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
